<template>
  <div class="ejurisdiction">
    <div v-if="eee">
      角色ID:
      <span style="margin-left:20px;">{{id}}</span>
    </div>
    <div>
      角色名字:
      <input
        style="width:200px;height:30px;margin-bottom:30px;margin-top:30px;"
        v-model="name"
      />
    </div>权限列表:
    <el-tree
      :data="data"
      show-checkbox
      default-expand-all
      node-key="func_id"
      ref="tree"
      class="tree"
      highlight-current
      :props="defaultProps"
      :default-checked-keys="buttonpermsStr"
    ></el-tree>
    <div class="buttons" style="margin-top:50px">
      <el-button v-if="aaa" type="primary" plain @click="creat">添加</el-button>
      <el-button v-if="bbb" type="primary" plain @click="update">更新</el-button>
      <el-button @click="goBack">返回</el-button>
    </div>
    <!-- 确认执行 -->
    <el-dialog :visible.sync="submit" width="30%">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
      >
        <span>确定执行此操作吗？</span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submit = false">取消</el-button>
        <el-button type="primary" v-if="ccc" @click="creatData">确定新增</el-button>
        <el-button type="primary" v-if="ddd" @click="updateData">确定更新</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request";
import { Message } from "element-ui";
import { getToken, getAccount } from "@/utils/auth";
export default {
  data() {
    return {
      id: "",
      temp: {},
      data: [],
      name: "",
      defaultProps: {
        children: "funcions",
        label: "func_name"
      },
      allMenuId: [],
      asyncRoute: [],
      buttonpermsStr: [],
      aaa: false, //新增
      bbb: true, //更新
      ccc: false, //确认新增
      ddd: true, //确认更新
      eee: true, //ID
      submit: false,
      rules: {}
    };
  },
  methods: {
    //添加
    creat() {
      let allMenuId = [].concat(
        this.$refs.tree.getCheckedKeys(),
        this.$refs.tree.getHalfCheckedKeys()
      );
      this.allMenuId = allMenuId;
      this.aaa = true;
      this.bbb = false;
      this.ccc = true;
      this.ddd = false;
      this.eee = false;
      this.submit = true;
      this.temp = {
        functions: this.allMenuId,
        role_name: this.name,
        role_id: ""
      };
    },
    //修改
    update() {
      let allMenuId = [].concat(
        this.$refs.tree.getCheckedKeys(),
        this.$refs.tree.getHalfCheckedKeys()
      );
      this.allMenuId = allMenuId;
      this.aaa = false;
      this.bbb = true;
      this.ccc = false;
      this.ddd = true;
      this.eee = true;
      this.submit = true;
      this.temp = {
        functions: this.allMenuId,
        role_id: this.id,
        role_name: this.name
      };
    },
    //确认新增
    creatData() {
      return request({
        url: "/v3/admin/role/insert",
        method: "post",
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        this.submit = false;
        this.$router.push({ path: "/admin/jurisdiction" });
      });
    },
    //确认更新
    updateData() {
      return request({
        url: "/v3/admin/role/update",
        method: "post",
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        this.submit = false;
        this.$router.push({ path: "/admin/jurisdiction" });
      });
    },
    //返回
    goBack() {
      this.$router.push({ path: "/admin/jurisdiction" });
    },
    //获取所有功能列表
    getList() {
      return request({
        url: "/v3/admin/function/all/list",
        method: "post",
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        this.data = res.funcionLists;
        var data = res.funcionLists;
        //一级
        data.map((val, inx) => {
          if (val.funcions !== null) {
            //二级
            var child = [];
            val.funcions.map((vall, indd) => {
              if (vall.funcions !== null) {
                if (vall.is_check == 0) {
                  this.buttonpermsStr.push(vall.func_id);
                }
                var childd = [];
                vall.funcions.map((valll, inddd) => {
                  if (valll.is_check == 0) {
                    this.buttonpermsStr.push(valll.func_id);
                  }
                });
              }
              child.push({
                //二级
                name: vall.func_name,
                path: vall.path,
                meta: {
                  title: vall.func_name
                },
                children: childd
              });
            });
            this.asyncRoute.push({
              //一级
              name: val.func_name,
              path: val.path,
              meta: {
                title: val.func_name
              },
              children: child
            });
          } else {
            this.asyncRoute.push({
              name: val.func_name,
              path: val.path,
              meta: {
                title: val.func_name
              }
            });
          }
        });
      });
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    if (this.id == "") {
      this.eee = false;
      this.aaa = true;
      this.bbb = false;
      this.ccc = true;
      this.ddd = false;
      this.temp = {
        role_id: 0
      };
      this.getList();
    } else {
      this.temp = {
        role_id: this.id
      };
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
.ejurisdiction {
  margin-top: 55px;
  position: relative;
  padding: 50px;
  .tree {
    width: 500px;
    margin-left: 70px;
    border: 1px solid black;
  }
}
</style>